<template>
  <div>
    <!-- 这两种写法都可
      <CloudRadioGroup style="margin-right: 8px" v-model="placement" @change="onChange">
      <CloudRadio value="top"> top </CloudRadio>
      <CloudRadio value="right"> right </CloudRadio>
      <CloudRadio value="bottom"> bottom </CloudRadio>
      <CloudRadio value="left"> left </CloudRadio>
    </CloudRadioGroup> -->
    <CloudRadioGroup style="margin-right: 8px" v-model="placement" :list="list" @change="onChange">
    </CloudRadioGroup>
    <CloudButton type="primary" @click="showDrawer"> Open </CloudButton>
    <CloudDrawer
      title="Basic Drawer"
      :placement="placement"
      :closable="false"
      :visible="visible"
      @close="onClose"
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </CloudDrawer>
  </div>
</template>

<script>
  export default {
    title: '4.自定义位置 ',
    subTitle: '自定义位置，点击触发按钮抽屉从相应的位置滑出，点击遮罩区关闭',
    data () {
      return {
        visible: false,
        placement: 'left',
        list: [{
          title: 'top',
          value: 'top'
        }, {
          title: 'right',
          value: 'right'
        }, {
          title: 'bottom',
          value: 'bottom'
        }, {
          title: 'left',
          value: 'left'
        }],
      }
    },
    methods: {
      showDrawer () {
        this.visible = true;
      },
      onClose () {
        this.visible = false;
      },
      onChange (e) {
        this.placement = e;
      },
    }
  }
</script>

<style lang="scss">
</style>